<template>
  <div class="register-container">
    <h2>账号注册</h2>
    <div class="register-form">
      <div class="input-group">
        <el-input
          v-model="form.username"
          placeholder="请输入用户名"
          prefix-icon="el-icon-user">
        </el-input>
      </div>

      <div class="input-group">
        <el-input
          v-model="form.password"
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          show-password>
        </el-input>
      </div>

      <div class="input-group">
        <el-input
          v-model="form.confirmPassword"
          placeholder="请确认密码"
          prefix-icon="el-icon-lock"
          show-password>
        </el-input>
      </div>


      <div class="input-group">
        <el-input
          v-model="form.email"
          placeholder="请输入邮箱地址"
          prefix-icon="el-icon-message">
        </el-input>
      </div>


      <div class="agreement">
        <el-checkbox v-model="agreement">
          我已阅读并同意
          <a href="#" @click.prevent="showTerms('用户协议')">《用户协议》</a>、
          <a href="#" @click.prevent="showTerms('隐私政策')">《隐私政策》</a>
          等。
        </el-checkbox>
      </div>

      <el-button type="primary" class="register-button" @click="register">立即注册</el-button>
      <div class="options">
        <span>已有账号？</span>
        <a href="#" @click.prevent="goToLogin">立即登录</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data() {
    return {
      form: {
        username: "",
        password: "",
        confirmPassword: "",
        email: ""
      },
      agreement: false
    };
  },
  methods: {
    register() {
      // 表单验证
      if (!this.validateForm()) {
        return;
      }

      // 检查是否同意条款
      if (!this.agreement) {
        this.$message({
          message: '请阅读并同意用户协议和隐私政策',
          type: 'warning'
        });
        return;
      }

      // 准备发送的数据（移除确认密码字段）
      const registData = {
        username: this.form.username,
        password: this.form.password,
        phone: this.form.phone,
        email: this.form.email
      };

      // 发送注册请求
      let url = '/user/regist';
      this.$http.post(url, registData).then(res => {


        if (res.data.code === 1) {
          // 注册成功
          this.$message({
            message: res.data.msg || '注册成功！',
            type: 'success'
          });
          // 注册成功后跳转到登录页
          setTimeout(() => {
            this.$router.push('/login');
          }, 1500);
        } else {
          // 注册失败
          this.$alert(res.data.msg || '注册失败，请稍后重试');
        }
      }).catch(err => {
        console.error('注册请求失败:', err);
        this.$alert('网络错误，请稍后重试');
      });
    },
    validateForm() {
      // 用户名验证
      if (!this.form.username) {
        this.$message.error('请输入用户名');
        return false;
      }

      // 密码验证
      if (!this.form.password) {
        this.$message.error('请输入密码');
        return false;
      }

      if (this.form.password.length < 6) {
        this.$message.error('密码长度不能少于6位');
        return false;
      }

      // 确认密码验证
      if (this.form.password !== this.form.confirmPassword) {
        this.$message.error('两次输入的密码不一致');
        return false;
      }


      // 邮箱验证
      const emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (this.form.email && !emailReg.test(this.form.email)) {
        this.$message.error('请输入正确的邮箱地址');
        return false;
      }

      return true;
    },
    showTerms(type) {
      // 显示用户协议或隐私政策
      this.$alert(`这里是${type}的详细内容`, type, {
        confirmButtonText: '我已阅读并同意',
        callback: action => {
          if (action === 'confirm') {
            this.agreement = true;
          }
        }
      });
    },
    goToLogin() {
      this.$router.push('/login');
    }
  }
}
</script>

<style scoped>
.register-container {
  width: 400px;
  margin: 50px auto;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.input-group {
  margin-bottom: 20px;
}

.agreement {
  margin: 15px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #606266;
}

.agreement a {
  color: #409EFF;
  text-decoration: none;
}

.agreement a:hover {
  text-decoration: underline;
}

.register-button {
  width: 100%;
  margin-top: 10px;
  padding: 12px 0;
  font-size: 16px;
}

.options {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: #606266;
}

.options a {
  color: #409EFF;
  text-decoration: none;
  margin-left: 5px;
}

.options a:hover {
  text-decoration: underline;
}
</style>
